<template>
	<view :class="isShow?'loading-container':'hide'">
		<image class="load-img" :src="loadImg" mode="aspectFit"></image>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: 'Loading',
		components: {},
		props: {
			
		},
		data() {
			return {
				isShow: true,
				loadImg: ''
			};
		},
		watch: {

		},
		created(){
			this.loadImg = `/static/images/loading-mini-${Math.floor(Math.random() * 4)}.gif`;
		},
		mounted() {

		},
		methods: {
			// 显示loading
			showLoading() {
				this.isShow = true;
			},
			
			// 隐藏loading
			hideLoading(){
				this.isShow = false;
			}
		}
	};
</script>

<style lang="less" scoped>
.loading-container{
	position: fixed;
	width: 100%;
	height: 100%;
	background: #fff;
	left: 0;
	top: 0;
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.load-img{
	width: 160rpx;
	height: 160rpx;
}
</style>
